import { 
  Layout, 
  Typography, 
  Space, 
  Divider,
  Row,
  Col,
  Tabs,
} from 'antd'
import { 
  RobotOutlined, 
  MessageOutlined,
  SettingOutlined
} from '@ant-design/icons'
  
import { ChatInterface } from './components/ChatInterface'
import { IPCDemo } from './components/IPCDemo'
import './App.css'

const { Header, Content, Footer } = Layout
const { Title, Text  } = Typography

// 安全地获取electron的API
const getElectronAPI = () => {
  try {
    if (typeof window !== 'undefined' && window.electronAPI) {
      return window.electronAPI;
    }
  } catch (error) {
    console.warn('无法获取electronAPI:', error);
  }
  return null;
};

const electronAPI = getElectronAPI();

function App() {
  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* 头部 */}
      <Header style={{ 
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        padding: '0 24px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <RobotOutlined style={{ fontSize: '24px', color: 'white' }} />
          <Title level={3} style={{ color: 'white', margin: 0 }}>
            AI对话系统 - Electron版
          </Title>
        </div>
       
      </Header>

      {/* 主要内容区域 */}
      <Content style={{ padding: '24px', background: '#f0f2f5' }}>
        <Tabs
          defaultActiveKey="chat"
          type="card"
          size="large"
          items={[
            {
              key: 'chat',
              label: (
                <Space>
                  <MessageOutlined />
                  <span>AI对话</span>
                </Space>
              ),
                children: (
                  <Row gutter={[24, 24]}>
                    <Col xs={24} xl={24}>
                      <ChatInterface electronAPI={electronAPI} />
                    </Col>
                  </Row>
                )
            },
            {
              key: 'system',
              label: (
                <Space>
                  <SettingOutlined />
                  <span>IPC日志测试</span>
                </Space>
              ),
              children: (
                <Row gutter={[24, 24]}>
                  <Col xs={24}>
                    <IPCDemo />
                  </Col>
                </Row>
              )
            }
          ]}
        />
      </Content>

      {/* 底部 */}
      <Footer style={{ 
        textAlign: 'center', 
        background: '#fff',
        borderTop: '1px solid #f0f0f0'
      }}>
        <Space>
          <Text type="secondary">
            Electron + React + Antd + TypeScript
          </Text>
          <Divider type="vertical" />
          <Text type="secondary">
            现代化桌面应用开发框架
          </Text>
        </Space>
      </Footer>
    </Layout>
  )
}

export default App